<template>

  <el-container>
    <!--头部-->
    <el-header>
      <span class="p"><img src="../assets/tx.jpg" style="width: 50px;border-radius: 20px;margin: 0 10px">电商后台管理系统</span>
      <el-button type="info" @click="logout" class="out">退出</el-button>
    </el-header>
    <!--页面主体-->
    <el-container>
      <!--侧边栏-->
      <el-aside :width="isCollapse?'64px':'200px'">
        <div class="toggle-button" @click="toggle">| | |</div>
        <!--侧边栏菜单区域 unique-opened保证同时只有一个子菜单能打开-->
        <el-menu background-color="#333744" text-color="#fff" :collapse-transition="false" :collapse="isCollapse" unique-opened router>
          <!--一级菜单-->
          <!--这里的index是submenu的唯一标识，并且只能为字符串-->
          <el-submenu :index="''+item.id" v-for="item in menulist" :key="item.id">
            <!--一级菜单模板区-->
            <template slot="title">
              <!--图标,使得每一个都有不同的图标-->
              <i :class="iconObj[item.id]" style="margin-right: 10px"></i>
              <!--文本-->
              <span>{{ item.authName }}</span>
            </template>
            <!--二级菜单 :index="'/home/'+a.path实现路由跳转-->
            <el-menu-item :index="'/home/'+a.path" v-for="a in item.children" :key="a.id">
              <!--二级菜单模板区-->
              <template slot="title">
                <!--图标-->
                <i class="el-icon-menu"></i>
                <!--本-->
                <span>{{ a.authName }}</span>
              </template>
            </el-menu-item>

          </el-submenu>

        </el-menu>

      </el-aside>
      <!--          右侧文段内容-->
      <el-main>
        <router-view></router-view>
      </el-main>

    </el-container>

  </el-container>

</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      menulist: [],
      iconObj:{
        '125':'el-icon-user-solid',
        '103':'el-icon-help',
        '101':'el-icon-goods',
        '102':'el-icon-s-claim',
        '145':'el-icon-data-line'
      },
      isCollapse:false,
    }
  },
  created() {
    this.getMenuList()
  },
  methods: {
    //点击按钮，切换菜单的折叠
    toggle(){
      this.isCollapse=!this.isCollapse
    },
    //退出跳转
    logout() {
      window.sessionStorage.clear()
      this.$router.push('/login')
    },
    //向后台获取菜单栏列表
    getMenuList() {
      this.$http.get('menus').then(res => {
        if (res.data.meta.status !== 200) {
          return this.$message.error(res.data.meta.msg)
        } else {
          this.menulist = res.data.data
        }
      })
    }
  }
}
</script>

<style scoped>
.out{
  margin-right: 20px;
}
.toggle-button{
  background-color:#485161;
  font-size: 10px;
  color: white;
  height:25px ;
  text-align: center;
  cursor: pointer;
}
.el-menu{
  border: 0;
}
.el-container {
  height: 100%
}

.el-header {
  display: flex;
  background-color: #373d41;
  padding: 0;
  align-items: center;
  justify-content: space-between;
  color: #fff;
}

.p {
  display: flex;
  align-items: center;
}

.el-aside {
  background-color: #333744;
}

.el-main {
  background-color: #eaedf1;
}
</style>